<template>
	<view class="layout pageBg4">
		<view class="index">
		<scroll-view scroll-x="true" class='scroll-content' :scroll-into-view='scrollIntoIndex'>
			<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='index'
				@tap='changeTab(index)'>
				<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
			<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
				<swiper-item>
					<view class="home-data">


						<view class="title">
							<text>学习时长统计</text>
						</view>
						<view class="daylearning">
							<learning-Time :categories="['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:00']"
								name="每日在线学习时长(分钟)" :data="durations"></learning-Time>
						</view>
						<view class="daylearning">
							<learning-Time :categories="weekTime.dates"
								name="每周在线学习时长(小时)" :data="weekTime.durations"></learning-Time>
						</view>
						<view class="title">
							<text>学习科目时长占比</text>
						</view>
						<view class="courselearing">
							<courseTime :data="SubLearningTime"></courseTime>
						</view>
						<view class="fill">
							
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="home-data">
						<view class="title">
							<text>各科成绩分布</text>
						</view>
						<view class="grade">
							<gradeColumn :categories="SubGrade.name" name="科目成绩"
								:data="SubGrade.value">
							</gradeColumn>
						</view>
						<view class="title">
							<text>AI学习建议</text>
						</view>
							<view class="suggestion">
								<view class="text">
									<text>
										{{AIsuggestion}}
									</text>									
								</view>
							</view>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<view class="safe-area-inset-bottom">
			
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref} from 'vue'
	import {onReady} from '@dcloudio/uni-app'
	import apis from '../../api/apis.js'
	import { navBarHeight } from '../../utils/system.js'
	const topBarIndex = ref(0)
	//内容块的高度
	const clentHeight = ref(0)
	const topBar = ref([{
			name: '学习时长'
		},
		{
			name: '成绩分析'
		}
	])
	onMounted(() => {
		//获取内容块的高度赋值
		// setTimeout(() => {

			let view = uni.createSelectorQuery().select('.home-data')
			view.boundingClientRect(data => {
				clentHeight.value = data.height
			}).exec()
		// }, 200)
	})
	const changeTab = (index) => {
		if (topBarIndex.value === index) {
			return;
		}
		topBarIndex.value = index;
		scrollIntoIndex.value = "top" + index
	}

	const onChangeTab = (e) => {
		changeTab(e.detail.current)
	}

	const scrollIntoIndex = ref("top0")
	
	let SubLearningTime = ref([])
	const getSub = async ()=>{
		let res = await apis.getStudentLearningTimeSubject()
		// console.log(res)
		SubLearningTime.value = res.data
		// console.log(res.data)
		// console.log(SubLearningTime.value)
	}
	let SubGrade = ref([])
	const subjectScore = [
	  {
	    name: '工信人才区块链产品经理',
	    value: 90,
	    color: '#1B71EE'
	  },
	  {
	    name: '【云原生】高薪必备！什么是云原生？云计算课程快速解析！',
	    value: 85,
	    color: '#F54CE8'
	  },
	  {
	    name: 'SEO站内优化-仿站建站-SEM竞价推广-流量变现-网络营销零基础入门',
	    value: 80,
	    color: '#2D5175'
	  },
	  {
	    name: 'SAP 从零学FICO系列',
	    value: 60,
	    color: '#2601B3'
	  }
	]
	const getGrade = async ()=>{
		// let res = await apis.getStudentSubjectScore()
		// console.log(res)
	
		SubGrade.value.name = subjectScore.map((item)=>item.name)
		SubGrade.value.value = subjectScore.map((item)=>item.value)
		// console.log(res.data)
		console.log(SubGrade.value)
	}
	let AIsuggestion = ref('')
	const getAI = async ()=>{
		let res = await apis.getStudentAISuggestion()
		// console.log(res)
		AIsuggestion.value = res.data
		// console.log(res.data)
		// console.log(AIsuggestion.value)
	}	
	
	let durations = ref([]);
	let hours = [];
	// 每日学习时长的获取
	let dayTime = ref([])
	const selectedDate = ref(new Date()) // 初始化选中的日期为当前日期
	const getDayTime = async ()=> {
		// 使用它 避免把时间转换时 差了一天
		  const formattedDate = formatDateForBackend(selectedDate.value)
		  // console.log(formattedDate)
		const res = await apis.getStudentLearningTime(formattedDate)
		 durations.value = res.data.map((item) => item.duration)
		  hours = res.data.map(
		    (item) => `${item.hour.padStart(2, '0')}:00`
		  )
		// console.log(durations.value)
		// console.log(hours)
		
	}
	
	 	// 每周学习时长的获取
	let weekTime = ref([])
	const getWeekTime = async ()=> {
		// 使用它 避免把时间转换时 差了一天
		  const formattedDate = formatDateForBackend(selectedDate.value)
		  // console.log(formattedDate)
		const res = await apis.getStudentLearningTimeWeek(formattedDate)
		 weekTime.value.durations = res.data.map((item) => item.duration)
		   weekTime.value.dates = res.data.map(
		     (item) => item.date
		  )
		// console.log(weekTime.value.duration)
		// console.log("weekTime.value.dates")
		// console.log(weekTime.value.dates)
		
	}
	
	// 用来转换 时间为固定格式 否则 前端在切换日期给后端传的时候 会传的少一天  本来传8号  那么会变成7号
	const formatDateForBackend = (date) => {
	  const year = date.getFullYear()
	  const month = String(date.getMonth() + 1).padStart(2, '0')
	  const day = String(date.getDate()).padStart(2, '0')
	  return `${year}-${month}-${day}`
	}
	
	
		getSub()
		getGrade()
		getAI()
		
// onMounted(()=>{
	getDayTime()
	getWeekTime()
	
// })

</script>

<style lang="scss" scoped>
	.layout {
		.index {
			.scroll-content {
				width: 100%;
				height: 80rpx;
				white-space: nowrap;
			}

			.scroll-item {
				display: inline-block;
				text-align: center;
				margin-top: 10rpx;
				padding-left: 30rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				padding: 10rpx 0;
				border-bottom: 6rpx solid rgba(22, 93, 255, 1);
				color: rgba(22, 93, 255, 1);
			}

			.f-color {
				color: #636263;
			}
		}


		.title {
			font-weight: 600;
			border-left: 6rpx solid rgba(22, 93, 255, 1);
			padding-left: 10rpx;
			margin-top: 30rpx;
			margin-left: 40rpx;
		}
		.suggestion{
				padding: 30rpx;
				width: 90vw;
				margin: 20rpx auto;
				background-color: #fff;
				border: 1px solid #ccc;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
				.text{
					font-weight: 600;
					font-size: 30rpx;
					line-height: 50rpx;
				}
			}

		.daylearning,.courselearing {
			padding: 10rpx;
		}
		.fill{
			height: 1vh;
		}
	}
</style>